<!--
 * @Description: 新建、编辑GRE隧道
 * @Author: 0001101008/HuYuxi
 * @Date: 2021-11-01 14:29:09
 * @LastEditTime: 2021-11-11 16:24:39
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <el-dialog
    :title="diagTitle"
    :close-on-click-modal="false"
    width="500px"
    :visible.sync="dialogStatus"
    @close="cancel"
  >
    <el-form
      ref="greForm"
      :model="form"
      :rules="rules"
      label-width="80px"
      label-position="right"
      class="form"
    >
      <!-- 隧道号 -->
      <el-form-item label="隧道号" prop="tunnelNo">
        <el-input-number
          :min="1"
          :max="1000"
          :disabled="form.id ? true: false"
          v-model="form.tunnelNo"
          placeholder="范围：1-1000"
        ></el-input-number>
      </el-form-item>
      <!-- 模式 -->
      <el-form-item label="模式" prop="mode">
        <el-select
          v-model="form.mode"
          style="width:100%;"
          @change="changeMode"
          :disabled="form.id ? true: false"
        >
          <el-option
            v-for="(item, index) in modeList"
            :key="index"
            :value="item.value"
            :label="item.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 源模式 -->
      <el-form-item label="源模式" prop="sourceMode">
        <el-select v-model="form.sourceMode" style="width:100%;">
          <el-option value="IPv4" label="IPv4" :disabled="form.mode === 'IPv6' ? true : false"></el-option>
          <el-option value="IPv6" label="IPv6" :disabled="form.mode === 'IPv4' ? true : false"></el-option>
          <el-option value="Interface" label="源接口"></el-option>
        </el-select>
      </el-form-item>
      <!--IPv4 源地址 -->
      <el-form-item label="源地址" prop="srcAddr">
        <el-input v-model="form.srcAddr" placeholder="请输入源地址,格式IPv4/IPv6"></el-input>
      </el-form-item>
      <!-- 源接口的源地址 -->
      <el-form-item
        label="源地址"
        prop="srcIntf"
        :rules="{ required: true,message: '请检查必填项！', trigger:'change'}"
        v-if="form.sourceMode === 'Interface'"
      >
        <el-select v-model="form.srcIntf" style="width:100%;">
          <el-option
            v-for="(item, index) in interfList"
            :key="index"
            :value="item.oid"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- IPv4 目的地址 -->
      <el-form-item label="目的地址" prop="destAddr">
        <el-input v-model="form.destAddr" placeholder="请输入目的地址,格式IPv4/IPv6"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: ['ne', 'type', 'dialogStatus', 'row'],
  data () {
    return {
      diagTitle: '新建GRE隧道',
      form: {
        id: null,
        tunnelNo: -1,
        mode: 'IPv4',
        sourceMode: 'IPv4',
        srcAddr: '',
        srcIntf: null,
        destAddr: '',
        bfd: false,
        checksum: false,
        clearDf: false,
        setdscp: false,
        dscp: 0,
        setkeeplivePrd: true,
        keeplivePrd: 10,
        setkeepliveRetries: true,
        keepliveRetries: 3,
        // vrf: '',
        setkey: false,
        key: 0
      },
      modeList: [
        { value: 'IPv4', label: 'IPv4' },
        { value: 'IPv6', label: 'IPv6' }
      ],
      interfList: [],
      rules: {
        tunnelNo: [{
          required: true,
          message: '请输入合理的隧道号',
          trigger: 'blur'
        }],
        mode: [{
          required: true,
          message: '请选择模式',
          trigger: 'change'
        }]
      },
      page: {
        page: 1,
        pageSize: 15,
        total: 0
      },
      ipv6Reg: /^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/
    }; // fe80::2c65:ee2d:a1a6:d458%4
  },
  watch: {
    type: {
      immediate: true,
      handler (val) {
        let _this = this;
        if (val === 'create') {
          _this.diagTitle = '新建GRE隧道';
          _this.form = {
            id: null,
            tunnelNo: -1,
            mode: 'IPv4',
            sourceMode: 'IPv4',
            srcAddr: '',
            srcIntf: null,
            destAddr: '',
            bfd: false,
            checksum: false,
            clearDf: false,
            setdscp: false,
            dscp: 0,
            setkeeplivePrd: true,
            keeplivePrd: 10,
            setkeepliveRetries: true,
            keepliveRetries: 3,
            // vrf: '',
            setkey: false,
            key: 0
          };
        } else {
          _this.diagTitle = '编辑GRE隧道';
          _this.form = {
            id: _this.row.id,
            tunnelNo: _this.row.tunnelNo,
            mode: _this.row.attrs.mode,
            sourceMode: _this.row.sourceMode,
            srcAddr: _this.row.srcAddr,
            srcIntf: _this.row.srcIntf,
            destAddr: _this.row.destAddr,
            bfd: _this.row.bfd,
            checksum: _this.row.checksum,
            clearDf: _this.row.clearDf,
            setdscp: true,
            dscp: _this.row.dscp,
            setkeeplivePrd: true,
            keeplivePrd: _this.row.keeplivePrd,
            setkeepliveRetries: true,
            keepliveRetries: _this.row.keepliveRetries,
            // vrf: '',
            setkey: false,
            key: _this.row.key
          };
        }
      }
    }
  },
  mounted () {
    let _this = this;
    _this.$nextTick(() => {
      _this.getIpByInter();
    });
  },
  methods: {
    // 取消
    cancel () {
      let _this = this;
      _this.$refs['greForm'].resetFields();
      _this.$emit('handleDialog', false);
      _this.clearData();
    },
    // 清空数据
    clearData () {
      let _this = this;
      _this.form = {
        id: null,
        tunnelNo: -1,
        mode: 'IPv4',
        sourceMode: 'IPv4',
        srcAddr: '',
        srcIntf: null,
        destAddr: '',
        bfd: false,
        checksum: false,
        clearDf: false,
        setdscp: false,
        dscp: 0,
        setkeeplivePrd: true,
        keeplivePrd: 10,
        setkeepliveRetries: true,
        keepliveRetries: 3,
        // vrf: '',
        setkey: false,
        key: 0
      };
    },
    // 选择模式
    changeMode (val) {
      let _this = this;
      if (val === 'IPv4') {
        _this.form.sourceMode = 'IPv4';
      } else if (val === 'IPv6') {
        _this.form.sourceMode = 'IPv6';
      }
    },
    // 选择持续时间
    changeKeeplivePrd (val) {
      let _this = this;
      if (!val) {
        _this.form.keeplivePrd = null;
        _this.form.setkeepliveRetries = false;
      } else {
        _this.form.keeplivePrd = 10;
        _this.form.setkeepliveRetries = true;
      }
    },
    // 选择确认持续时间
    changeKeepliveRetries (val) {
      let _this = this;
      if (!val) {
        _this.form.keepliveRetries = null;
        _this.form.setkeeplivePrd = false;
      } else {
        _this.form.keepliveRetries = 3;
        _this.form.setkeeplivePrd = true;
      }
    },
    // 获取源接口模式下的目的地址
    getIpByInter () {
      let _this = this;
      let params = {
        commandCode: "intfselector.get",
        paras: {
          use: "GreIntf",
          limit: _this.page.pageSize,
          offset: (_this.page.page - 1) * _this.page.pageSize
        }
      };
      _this.$http.post({
        url: '/api/resource/nemng/command/' + _this.ne.id,
        data: params
      }).then(res => {
        if (res) {
          _this.interfList = res.objects;
        }
      });
    },
    // 确认
    submitForm () {
      let _this = this;
      _this.$refs['greForm'].validate((valid) => {
        if (valid) {
          let params = {
            tunnelNo: _this.form.tunnelNo,
            mode: _this.form.mode,
            sourceMode: _this.form.sourceMode,
            srcAddr: _this.form.sourceMode !== 'Interface' ? _this.form.srcAddr : null,
            srcIntf: _this.form.sourceMode === 'Interface' ? _this.form.srcIntf : null,
            destAddr: _this.form.destAddr,
            attrs: {
              bfd: _this.form.bfd,
              checksum: _this.form.checksum,
              clearDf: _this.form.clearDf,
              dscp: _this.form.setdscp ? _this.form.dscp : -1,
              keeplivePrd: _this.form.keeplivePrd,
              keepliveRetries: _this.form.keepliveRetries,
              mode: _this.form.mode,
              key: _this.form.setkey ? _this.form.key : -1
            }
          };
          if (_this.form.id) {
            params.id = _this.form.id;
          }
          let paras = _this.form.id ? { updates: [params] } : { adds: [params] };
          _this.$http.post({
            url: '/api/resource/nemng/command/' + _this.ne.id,
            data: {
              commandCode: 'vpn.gretunnel.set',
              paras: paras
            }
          }).then(res => {
            if (res) {
              _this.$message({
                message: _this.form.id ? '更新成功！' : '创建成功！',
                type: 'success'
              });
              _this.clearData();
              _this.$parent.refresh();
              _this.$emit('handleDialog', false);
            }
          });
        } else {
          _this.$message.error('请检查必填项！');
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.page-content {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  background: transparent !important;
  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 0px;
      box-sizing: border-box;
    }
  }
  ::v-deep .el-input-number {
    width: 235px;
  }
  .table-btn {
    padding: 0;
  }
}
@media only screen and (max-width: $device-ipad) {
  .page-content {
    ::v-deep .el-input-number {
      width: 195px;
    }
  }
}
</style>